<template>
  <div class="pf-flow-prop-other-config" id="js-properties-panel-custom">
    <div class="element-property__label">元素文档：</div>
    <div class="element-property__value">
      <el-input
        type="textarea"
        v-model="documentation"
        size="mini"
        resize="vertical"
        :autosize="{ minRows: 2, maxRows: 4 }"
        @input="updateDocumentation"
        @blur="updateDocumentation"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, nextTick, onMounted, ref, Ref, toRefs, watch } from 'vue';
import { modeler, TaskName } from '@/views/page-config/flow/flow-modeler';

export default defineComponent({
  name: 'ElementOtherConfig',
  props: ['id'],
  setup(props) {
    const id: Ref = toRefs(props).id;
    const documentation: Ref<string> = ref('');
    const updateDocumentation = () => {
      const bpmnElement = modeler.getElementRegistry().get(id.value);
      const documentationEl = modeler
        .getBpmnFactory()
        .create(TaskName.document, { text: documentation.value });
      modeler.updateActiveElement({
        documentation: [documentationEl]
      });
    };
    onMounted(() => {});
    watch(
      id,
      () => {
        if (id.value && id.value.length) {
          nextTick(() => {
            const documentations = modeler.getActiveElement().businessObject?.documentation;
            documentation.value =
              documentations && documentations.length ? documentations[0].text : '';
          });
        } else {
          documentation.value = '';
        }
      },
      { immediate: true }
    );
    return {
      documentation,
      updateDocumentation
    };
  }
});
</script>
<style scoped lang="scss">
.#{$prefix} {
}
</style>
